<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>slideLock Demo</title>
    <link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="css/lib/css3.css" rel="stylesheet" type="text/css" media="screen" />
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="jquery-ui-slider.js"></script>
    <script type="text/javascript" src="jquery.slideLock.js"></script>
    <script type="text/javascript">
    	$(document).ready(function() {
			
			// options listed for display purposes
			// style these options with css to fit your application
			$("#contact").slideLock({
			
				labelText: "Slide to Unlock:",
				noteText: "Proves you're human :)",
				lockText: "Locked",
				unlockText: "Unlocked",
				iconURL: "chrome/arrow_right.png",
				inputID: "sliderInput",
				onCSS: "#333",
				offCSS: "#aaa",
				inputValue: 1,
				saltValue: 9,
				checkValue: 10,
				submitID: "#submit"
			
			});
		
		});
    </script>
    <style type="text/css">
		#content { width: 500px; margin: 20px auto; }
		p, fieldset { max-width: 500px; }
		form.hform p label { width: 150px; }
    	p.quiet { padding-left: 150px; width: 200px; }
		span.quiet { font-size: .875em; }
		#locked { font-weight: bold; color: #333; }
		#unlocked { margin-left: 45px; }
		p.quiet img { margin: 0 0 0 40px; }
		
		.ui-slider { position: relative; text-align: left; display: block; margin: 10px 0 10px 170px; width: 155px; }
		.ui-slider-handle { position: absolute; z-index: 2; width: 16px; height: 16px; cursor: pointer; background: #333; top: -4px; margin-left: -8px; border: 1px solid #784807; }
		.ui-slider-horizontal { height: 10px; background: #ddd; border: 1px solid #ccc; }
		.ui-slider-handle:hover, .ui-state-hover, .ui-state-focus, .ui-state-active { background: #aaa; }
		
		/* CSS3 ---------------------------------------------------- */
		.ui-slider-handle { 
			border-radius: 4px;
			-moz-border-radius: 4px;
			-webkit-border-radius: 4px;
			background: -moz-linear-gradient(top, #f60, #930);
			background: -webkit-gradient(linear, left top, left bottom, from(#f60), to(#930));
		}
		.ui-slider-horizontal { 
			border-radius: 4px;
			-moz-border-radius: 4px;
			-webkit-border-radius: 4px;
			background: -moz-linear-gradient(left, #fff, #ddd);
			background: -webkit-gradient(linear, left top, right top, from(#fff), to(#ddd));
		}
		a.ui-state-hover, a.ui-state-focus { 
			background: -moz-linear-gradient(top, #666, #333);
			background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#333));
			box-shadow: 0px 0px 10px #f60;
			-moz-box-shadow: 0px 0px 10px #f60;
			-webkit-box-shadow: 0px 0px 10px #f60;
		}
		a.ui-state-active { 
			background: -moz-linear-gradient(top, #ddd, #aaa);
			background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#aaa));
		}
    </style>
</head>
<body>
	<div id="content">
        <h1>slideLock Demo</h1>
        <p>Use the form below to try out slideLock. The plugin will insert the slide ui element before the submit button on whichever form it is attached to. The labels, icon and test values are all customizable.</p>
        <p>Note that a hidden field is inserted as well and carries the test value for which you should check on the server side.</p>
        <p>Obviously this plugin will fail without Javascript and therefore server side validation must take this into account.</p>
        <p><a href="http://www.smullinstudios.com/downloads/slideLock.zip">Download</a> the latest version.</p>
        <p>Have a question? <a href="http://www.smullinstudios.com/contact.php">Contact me</a>.</p>
        <form action="" method="post" id="contact" class="hform">
            <fieldset>
                <legend>Contact Us</legend>
                <p><label for="name">Name:</label><input type="text" name="name" id="name" value="" /></p>
                <p><label for="email">E-mail:</label><input type="text" name="email" id="email" value="" /></p>
                <p><label for="comments">Comments:</label><textarea name="comments" id="comments"></textarea></p>
                <input type="submit" name="submit" id="submit" value="Contact Us" />
            </fieldset>
        </form>
    </div>
</body>
</html>